import React, { Component } from 'react'
import { View, StyleSheet, Text, FlatList, RefreshControl } from 'react-native'
import { TabView } from 'react-native-tab-view'
import BasePage from 'src/pageP/base/base-page'
import { ScaleS, STATUSBAR_HEIGHT } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'

const routes = [
  { key: 'partTime', title: '兼职' },
  { key: 'practice', title: '实习' },
  { key: 'fullTime', title: '全职' }
]
export default class TestHomePage extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      header: null,
      index: 0,
      routes: routes,
      refreshing: false
    }
  }

  childRender () {
    return (
      <View style={styles.container}>
        <View style={styles.homeHeaderView}>
          <CustomImage source={require('src/imgC/home/home_header.png')}/>
        </View>
        <View style={styles.tabOutView}>
          {this._renderHeader()}
          <TabView
            ref={this._tabViewRef}
            style={styles.tabView}
            navigationState={this.state}
            renderScene={this._renderScene}
            onIndexChange={this._onIndexChange}
            renderTabBar={this._renderTabBar}
          />
        </View>

      </View>
    )
  }

  _tabViewRef = (ref) => {
    this.tabViewRef = ref
    console.info(this.tabViewRef)
  }

  _renderTabBar = (props) => {
    return (
      <View></View>
    )
  }

  /**
   * 渲染头部
   * @param props
   * @returns {*}
   * @private
   */
  _renderHeader = () => {
    return (
      <View style={styles.headerView}>
        <View style={styles.titleView}>
          {
            routes.map((item, routeIndex) => {
              return (
                <CustomButton
                  params={{ index: routeIndex }}
                  key={routeIndex} onPress={this._titlePress}
                >
                  <Text>{item.title}</Text>
                </CustomButton>
              )
            })
          }
        </View>
      </View>
    )
  }

  _titlePress = ({ index }) => {
    const { navigationState: { index: currentIndex } } = this.tabViewRef.props
    const { jumpToIndex } = this.tabViewRef
    if (index !== currentIndex) {
      jumpToIndex(index)
    }
  }

  /**
   * 切换标签
   * @param index
   * @private
   */
  _onIndexChange = (index) => {
    this.setState({ index })
  }

  /**
   * 渲染每一个屏
   * @param route
   * @param jumpTo
   * @returns {*}
   * @private
   */
  _renderScene = ({ route, jumpTo }) => {
    switch (route.key) {
      case routes[0].key:
        return this._renderPartTimeComponent()
      case routes[1].key:
        return this._renderPracticeComponent()
      case routes[2].key:
        return this._renderFullTimeComponent()
    }
  }

  _renderPartTimeComponent = () => {
    const { refreshing } = this.state
    return (
      <FlatList
        style={styles.flatList}
        contentContainerStyle={styles.contentFlatList}
        data={[1, 2, 3, 4]}
        renderItem={this._renderItem}
        // onRefresh={this._onRefresh}
        // refreshing={refreshing}
        // progressViewOffset={50}
        // ListHeaderComponent={this._ListHeaderComponent}
        refreshControl={<RefreshControl
          // tintColor="#ff0000"
          // title="Loading..."
          // titleColor="#00ff00"
          // colors={['#ff0000', '#00ff00', '#0000ff']}
          // progressBackgroundColor="#ffff00"
          enabled={false}
          progressViewOffset={50}
          refreshing={refreshing}
          onRefresh={this._onRefresh}/>
        }
      />
    )
  }

  _ListHeaderComponent = () => {
    return <View style={{ height: 100 }}/>
  }

  _onRefresh = () => {
    this.setState({ refreshing: true })
    setTimeout(() => {
      this.setState({ refreshing: false })
    }, 3000)
  }

  _renderItem = ({ item }) => {
    return <CustomButton onPress={() => {
      console.info('_renderItem')
    }}>
      <Text>{item}</Text>
    </CustomButton>
  }

  _renderPracticeComponent = () => {
    return <View>
      <Text>实习</Text>
    </View>
  }

  _renderFullTimeComponent = () => {
    return <View>
      <Text>全职</Text>
    </View>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFE400'
  },
  tabOutView: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    right: 0,
    left: 0
  },
  headerNullView: {
    height: STATUSBAR_HEIGHT + ScaleS(138)
  },
  tabView: {
    flex: 1,
    backgroundColor: 'transparent'
  },
  headerView: { height: ScaleS(138) },
  titleView: {
    flexDirection: 'row',
    marginTop: STATUSBAR_HEIGHT + ScaleS(42),
    justifyContent: 'center',
    height: ScaleS(30)
  },
  homeHeaderView: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: STATUSBAR_HEIGHT + ScaleS(42 + 30)
  },
  flatList: {
    flex: 1,
  },
  contentFlatList: {
    backgroundColor: 'white',
    minHeight: '100%'
  }
})
